<template>
  <div>
    <div class="flex-start tbox">
      <span class="t1">请输入订单id:</span>
      <el-input placeholder="请输入搜索的订单id" prefix-icon="el-icon-search" v-model="content" class="w" @input="inputgoods">
      </el-input>
      <div style="margin-left: 25px" @click="searchgoods">
        <el-button type="success" icon="el-icon-search">搜索</el-button>
      </div>

      <!-- 选择类型框 -->
      <div style="margin-left: 100px">
        <span class="t1">请选择订单类型:</span>
        <el-select v-model="value" clearable placeholder="请选择" style="width: 150px" @clear="clear" @change="xialachange">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>

    <!-- 表格主体 -->
    <dingdan_main :goodsList="realdata" @gengxin="getdata2"></dingdan_main>

    <!-- 页码数 -->
    <div class="flex-center" style="margin-top: 10px">
      <el-pagination background layout="total,prev, pager, next" :total="datalength" :page-size="pagesSize"
        @current-change="changesize">
      </el-pagination>
    </div>
  </div>
</template>

<script type="module">
import dingdan_tan from "../../cpmponent/dingdan_tan.vue";
import dingdan_main from "../dingdan/dingdan_main.vue";
export default {
  components: {
    dingdan_tan,
    dingdan_main
  },

  created() {
    this.tableData = [];
    this.getdata2();
    let m = {};
    m.path = this.$route.path;
    m.name = this.$route.name;
    m.type = "";
    this.$store.commit("addrouterlist", m);
  },
  data() {
    return {
      tableData: [],
      pagesNum: 1,
      pagesSize: 7,
      content: "",
      options: [
        {
          value: "1",
          label: "待发货",
        },
        {
          value: "2",
          label: "待收货",
        },
        {
          value: "3",
          label: "退货/退款",
        },
      ],
      goodsdetail: {
        goods_id: '',
        goods_name: '',
        goods_small_logo: '',
        goods_count: '',
        goods_price: '',
        goods_address: '',
        goods_if: '',
        goods_state: '',
        goods_all: ''
      },
      value: "",
      dialogVisible: false,
      zindex: 0,
      iid: "",
      leixing: "",
      realdata: [],
    };
  },
  computed: {
    datalength() {
      return this.tableData.length;
    },
  },
  methods: {
    // 请求数据库数据
    getdata2() {
      this.$axios.get(this.$IP + "/getOrderList").then((res) => {
        console.log("数据库的数据", res.data);
        this.tableData = res.data;
        this.tableData.forEach(item => {
          if (item.goods_if == 0) {
            item.if_fahuo = false
          }
          else {
            item.if_fahuo = true
          }
        })
        this.initrealgoods();
      });
    },
    initrealgoods() {
      this.realdata = this.tableData.slice(
        (this.pagesNum - 1) * this.pagesSize,
        this.pagesSize * this.pagesNum - 1
      );
    },
    // 输入关键字
    inputgoods() {
      if (this.content == "") {
        this.getdata2();
        this.initrealgoods();
        this.$message.success("重置成功");
      }
    },
    // 搜索商品
    async searchgoods() {
      let res = await this.$axios.post(this.$IP + "/searchorderid", {
        goods_id: this.content
      })
      this.tableData = res.data;
      this.initrealgoods();

    },
    // 清除选项
    clear() {
      this.value = "";
      this.getdata2();
      this.initrealgoods();
    },
    // 下拉框改变事件
    xialachange(e) {
      this.value = e;
      this.getOrderListChoose()
    },
    async getOrderListChoose() {
      let res = await this.$axios.post(this.$IP + '/getOrderListChoose', {
        goods_state: this.value
      })
      this.tableData = res.data;
      this.tableData.forEach(item => {
        if (item.goods_if == 0) {
          item.if_fahuo = false
        }
        else {
          item.if_fahuo = true
        }
      })
      this.initrealgoods();
    },
    // 改变页码进行触发事件
    changesize(e) {
      console.log("页码", e);
      this.pagesNum = e;
      this.initrealgoods();
    },

  },
};
</script>

<style scoped>
.tbox {
  margin-bottom: 20px;
}

.w {
  width: 190px;
}

.el-table__cell {
  text-align: center;
}

.t1 {
  padding-right: 10px;
  color: #545c64;
  font-weight: bold;
  font-size: 17px;
  width: 150px;
}

.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 108px;
  height: 108px;
  line-height: 108px;
  text-align: center;
}

.avatar {
  width: 108px;
  height: 108px;
  display: block;
}
</style>